<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary" @click="pickDate(value)">弹出日期</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning'">警告按钮</el-button>
      <el-button type="danger" icon="el-icon-edit">危险按钮</el-button>
      <el-button type="primary" disabled>不可用按钮</el-button>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="block">
          <span class="demonstration">带快捷选项</span>
          <el-date-picker v-model='value' align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="8">
        <el-input v-model="format" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="8">嘿嘿</el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    name: "HelloWorld",
    data() {
        return {
            msg: "Welcome to Your Vue.js App",
            value: '2018-05-13',
            //时间验证与快捷选项
            pickerOptions1: {
                //不可用时间设置
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                //快捷
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        }
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        }
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        }
                    },
                    {
                        text: "两周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(
                                date.getTime() - 3600 * 1000 * 24 * 14
                            );
                            picker.$emit("pick", date);
                        }
                    }
                ]
            }
        };
    },
    computed: {
        // value:function(value,oldvalue){}
        //     var year=value.getFullYear().toString();
        //     var month=(value.getMonth()+1).toString();
        //     var day=(value.getDate()).toString();
        //     if (month.length==1){
        //       month="0"+month;
        //     }
        //       if (day.length==1){
        //       day="0"+day;
        //     }
        //     alert( year+'-'+month+'-'+day);
        //   }else{
        //     alert('请选择时间');
        //   }
        // }
        format: function() {
            if (this.value && this.value instanceof Object ) {
                var year = this.value.getFullYear().toString();
                var month = (this.value.getMonth() + 1).toString();
                var day = this.value.getDate().toString();
                if (month.length == 1) {
                    month = "0" + month;
                }
                if (day.length == 1) {
                    day = "0" + day;
                }
                var timeformat=year + "-" + month + "-" + day;
                return timeformat;
            } else {
                return '';
            }
        }
    },
    methods: {
        pickDate(value) {
            if (value) {
                var year = value.getFullYear().toString();
                var month = (value.getMonth() + 1).toString();
                var day = value.getDate().toString();
                if (month.length == 1) {
                    month = "0" + month;
                }
                if (day.length == 1) {
                    day = "0" + day;
                }
                alert(year + "-" + month + "-" + day);
            } else {
                alert("请选择时间");
            }
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
    font-weight: normal;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
</style>
